<template>
  <div v-infinite-scroll="changPages"
    :infinite-scroll-disabled="disabled"
         style="overflow-y: auto; height: 100%;"
         infinite-scroll-distance="10"
    :infinite-scroll-delay="scrollDelay">
    <slot></slot>
    <div v-if="!disabled" style="text-align: center; padding: 5px 0 15px; color: #989898;"><i class="el-icon-loading"></i>加载中...</div>
    <div v-else style="text-align: center; padding: 5px 0 15px; color: #989898;">暂无更多数据</div>
  </div>
</template>

<script>
export default {
  name: 'loadMore',
  props: {
    // 关闭选项
    disabled: {
      type: Boolean,
      default: false
    },
    // 页面
    pageNum: {
      type: Number,
      default: 1
    },
    // 节流延迟
    scrollDelay: {
      type: Number,
      default: 400
    },
    // 总条数
    pages: {
      type: Number,
      default: 0
    }
  },
  watch: {
    page(value) {
      this.$emit('update:pageNum', value)
    },
    pageNum(value) {
      this.page = value
    },
  },
  data() {
    return {
      page: 1,
    }
  },
  methods: {
    changPages() {
      ++this.page
      if (this.page <= this.pages) {
        this.$nextTick(() => {
          this.$emit('changeData')
        })
      } else {
        this.$emit('update:disabled', true)
      }
    },
  }
}
</script>
